<template>
  <div class="two">
    <div class="twoone">
      <el-tabs v-model="activeName" class="asd" @tab-click="handleClick">
        <el-tab-pane label="前端学科" name="first">
          <div class="twoonel"><zhexianyi /></div>
        </el-tab-pane>
        <el-tab-pane label="JAVA学科" name="second">
          <div class="twoonel"><zhexianer /></div>
        </el-tab-pane>
        <tables />
      </el-tabs>
      <div id="xxx" class="block">
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </div>
    </div>
  </div>
</template>

<script>
import zhexianyi from '@/views/dashboard/zhexian.vue'
import zhexianer from '@/views/dashboard/zhexianer.vue'
import tables from '@/views/dashboard/table.vue'
export default {
  components: { zhexianyi, zhexianer, tables },
  data() {
    return {
      activeName: 'first',
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      value1: '',
      value2: ''
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style>
.twoone {
  position: relative;
  /* width: 1430px; */
}
.asd {
  width: 100%;
}
#xxx {
  position: absolute;
  top: 0;
  right: 0;
}
.twoonel {
  width: 900px;
  height: 18.75rem;
  float: left;
}
</style>
